import React from 'react'
import {connect} from 'dva'
import {Link, browserHistory} from 'dva/router'
import {Table, Row, Col, Form, Input, InputNumber, Select, Button, Switch, Modal, Popconfirm, message} from 'antd';
import Validator from '../../../utils/Validator';
import RightBox from "../../../components/commons/RightBox";
import RIGHT from "../../../utils/RightConstants";
import Constants from '../../../utils/Constants';

const FormItem = Form.Item;
const Option = Select.Option;


const strategy = Form.create()(class Strategy extends React.Component {

    componentDidMount() {
        this.props.dispatch({type: 'strategy/getStrategyList', payload: {page: Constants.DEFAULT_PAGE, status: 1}});
    }

    constructor(props) {
        super(props);
    }

    onEdit = (id) => {
        this.props.dispatch({
            type: 'strategy/getStrategyById',
            payload: {id}
        });
        this.strategyDetail.handleOpen();
    };

    handleSearch = (flag) => {
        let newPage = this.props.strategy.page;
        if (flag) newPage.page = 1;
        this.props.dispatch({
            type: 'strategy/getStrategyList',
            payload: {
                ...this.props.form.getFieldsValue(),
                page: newPage
            }
        });
    };

    columns = [{
        title: '业务类型', key: 'businessType',
        render(record) {
            let type = "";
            if (record.businesstype == "priceStrategy") {
                type = '价格策略';
            } else if (record.businesstype == "orderSettlement") {
                type = '收汇区间';
            } else {
                type = '无';
            }
            return (
                type
            );
        }
    }, {
        title: '收费类型',
        key: 'chargeType',
        render(record) {
            return (
                record.type == 1 ? "按笔固定" : "按百分比"
            );
        }
    }, {
        title: '保底收费 CNY',
        dataIndex: 'lowprice',
        key: 'lowprice',
    }, {
        title: '封顶收费 CNY',
        dataIndex: 'highprice',
        key: 'highprice',
    }, {
        title: '优惠减免 CNY',
        dataIndex: 'benefit',
        key: 'benefit',
    }, {
        title: '状态',
        render(record) {
            return (
                record.status == 1 ? "启用" : "停用"
            );
        }
    }, {
        title: '创建时间',
        dataIndex: 'createtime',
        key: 'createtime'
    }, {
        title: '操作',
        width: '100px',
        render: (record) => {
            return (
                <span>
                    <RightBox resource={RIGHT.BASEDATA.BASE_STRATEGY_EDIT}>
                        <a href="#" onClick={this.onEdit.bind(this, record.id)}>编辑</a><span className="ant-divider"/>
                    </RightBox>
                    <RightBox resource={RIGHT.BASEDATA.BASE_STRATEGY_DELETE}><Popconfirm placement="leftTop"
                                                                                         title={'数据删除后将不可以恢复，是否继续删除？'}
                                                                                         onConfirm={() => {
                                                                                             this.props.dispatch({
                                                                                                 type: 'strategy/deleteStrategyById',
                                                                                                 payload: {
                                                                                                     id: record.id,
                                                                                                     onSuccess: () => this.handleSearch()
                                                                                                 }
                                                                                             });
                                                                                         }} okText="是" cancelText="否">
                        <a href="#">删除</a>
                    </Popconfirm></RightBox>
                </span>
            );
        }
    }];

    render() {
        let formItemLayout = {labelCol: {span: 8}, wrapperCol: {span: 16}};
        let values = this.props.form.getFieldsValue();
        const {getFieldDecorator} = this.props.form;

        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.strategy.page.size,
            current: this.props.strategy.page.page,
            total: this.props.strategy.page.totalRow,
            showSizeChanger: true,
            onShowSizeChange: (current, size) => {
                let newPage = this.props.strategy.page;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'strategy/getStrategyList',
                    payload: {
                        ...values,
                        status: 1,
                        page: newPage
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = this.props.strategy.page;
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'strategy/getStrategyList',
                    payload: {
                        ...values,
                        status: 1,
                        page: newPage
                    }
                });
            }
        }


        return (
            <div>
                <Row>
                    <Col span={5}>
                        <FormItem {...formItemLayout} label={'报关抬头类型1'}>
                            {getFieldDecorator('businesstype')(
                                <Select style={{width: '90%'}} allowClear>
                                    <Option value="orderSettlement">收汇区间</Option>

                                    <Option value="priceStrategy">价格策略</Option>
                                </Select>
                            )}
                        </FormItem>
                    </Col>


                    <Col span={5}>
                        <FormItem {...formItemLayout} label={'报关抬头类型2'}>
                            {getFieldDecorator('businetpe')(
                                <Input style={{width: '90%'}} allowClear/>
                            )}
                        </FormItem>
                    </Col>


                    <Col span={14}>
                        <Button type="primary" icon="search" style={{marginRight: 5}}
                                onClick={this.handleSearch.bind(this, true)}>查询</Button>
                        <RightBox resource={RIGHT.BASEDATA.BASE_STRATEGY_ADD}><Button icon="plus"
                                                                                      onClick={this.onEdit.bind(this, null)}>添加价格策略</Button></RightBox>
                    </Col>
                </Row>

                <Table rowKey="id" dataSource={this.props.strategy.list} loading={this.props.loading}
                       columns={this.columns} bordered={true} size={'middle'} scroll={{x: true}}
                       pagination={pagination}/>
                <BaoguantaitouDetail wrappedComponentRef={(inst) => this.strategyDetail = inst}
                                refreshList={this.handleSearch}/>
            </div>
        );
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.strategy, strategy: state.strategy
    };
}

export default connect(mapStateToProps)(strategy);
